<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name = "format-detection" content = "telephone=no">
		<title>问题反馈</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
		<!-- 引用控制层插件样式 -->
		<link rel="stylesheet" href="css/zyUpload.css" type="text/css">	
		<!-- 引用核心层插件 -->
		<script type="text/javascript" src="js/zyFile.js"></script>
		<!-- 引用控制层插件 -->
		<script type="text/javascript" src="js/zyUpload.js"></script>
		<!-- 引用初始化JS -->
		<script type="text/javascript" src="js/demo.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			$(".row2-chose input").attr("disabled","disabled");
			// 点击下拉出现
			var i =0;
			$(".row2-chose").click(function(e){
				$(".row2-chose").next(".selcet").slideUp();
					i++;
				if (i==1) {
					$(this).next(".selcet").slideDown();
					i=1;
				}
				else if (i==2) {
					$(this).next(".selcet").slideUp();
					i=0;
				}
			});
			
			$(".selcet span").click(function(){
				var sel= $(this).text();
				$(this).parent("div").prev(".row2-chose").find("input").val(sel);
				$(this).parent("div").slideUp();
			});
			
			$("#codeForm").submit(function(){
				var textarea =$("#textarea").val();
				var check = $("#check").val();
				var check1 = $("#check1").val();
				var check2 = $("#check2").val();
				if (textarea == "") {
					alert("请填写内容");
					$("#textarea").focus();
					event.preventDefault();
					return false;
				}
				else if (check=="") {
					alert("请选择区域")
					event.preventDefault();
					return false;
				}
				else if (check1=="") {
					alert("请选择类型")
					event.preventDefault();
					return false;
				}
				else if (check2=="") {
					alert("请选择责任部门")
					event.preventDefault();
					return false;
				}
				else{
					alert("提交成功");
					return true;
				}
			});
			// 下拉框超出省略号
			 $(".selcet span").each(function(){
			 	var max =10;
			 	if ($(this).text().length > max) {
			 		$(this).text($(this).text().substring(0,max)+"……")
			 	}
			 });
			 // 选择内容超出省略号
			$(".row2-chose input").each(function(){
			 	var max =16;
			 	if ($(this).val().length > max) {
			 		$(this).val($(this).val().substring(0,max)+"……")
			 	}
			 });
			})
		</script>
	</head>
	<body>
	<form action="" method="post" id="codeForm">
		<section class="section">
			<div class="row1">
				<textarea id="textarea" class="input_text" placeholder="请输入详细描述" autoHeight="true" style="resize: none;"></textarea>
			</div>
		</section>
		<section class="section"></section><!-- 中间空余部位 -->
		<section class="section ">
			<div class="row2 flex-b flex position">
				<div class="type">
					<span>区域</span>
				</div>
				<div class="row2-chose flex flex-b ">
					<input type="text" placeholder="请选择" id="check" >
					<div class="row2-select">
						<img src="img/1.png">
					</div>
				</div>
				<div class="selcet">
					<span>区域111撒是的是的是的是的是的是的是的</span>
					<span>区域2</span>
					<span>区域一</span>
					<span>区域一</span>
					<span>区域一</span>
					<span>区域一</span>		
				</div>
			</div>
		</section>
		<section class="section ">
			<div class="row2 flex-b flex position">
				<div class="type">
					<span>类型</span>
				</div>
				<div class="row2-chose flex flex-b ">
					<input type="text" placeholder="请选择" id="check1" >
					<div class="row2-select">
						<img src="img/1.png">
					</div>
				</div>
				<div class="selcet">
					<span>区域一</span>
					<span>区域一</span>
					<span>区域一</span>
					<span>区域一</span>
					<span>区域一</span>
					<span>区域一</span>		
				</div>
			</div>
		</section>
		<section class="section ">
			<div class="row2 flex-b flex position">
				<div class="type">
					<span>责任部门</span>
				</div>
				<div class="row2-chose flex flex-b ">
					<input type="text" placeholder="请选择" id="check2" >
					<div class="row2-select">
						<img src="img/1.png">
					</div>
				</div>
				<div class="selcet">
					<span>区域一</span>
					<span>区域一</span>
					<span>区域一</span>
					<span>区域一</span>
					<span>区域一</span>
					<span>区域一</span>		
				</div>
			</div>
		</section>
		<section class="section"><!-- 上传按钮 -->
			<div class="row1">
				<div id="demo" class="demo"></div> 
			</div>
		</section><!-- 上传按钮 -->
		<footer class="footer">
			<input type="submit" value="提交"></input>
		</footer>
	</form>
	</body>
	<script type="text/javascript">
	    $.fn.autoHeight = function(){
    	function autoHeight(elem){
    		elem.style.height = 'auto';
    		elem.scrollTop = 0; //防抖动
    		elem.style.height = elem.scrollHeight + 'px';
    	}
    	this.each(function(){
    		autoHeight(this);
    		$(this).on('keyup', function(){
    			autoHeight(this);
    		});
    	}); 
    }   	 	
    $('textarea[autoHeight]').autoHeight();
    // textarea高度自适应
	</script>
	</html>
